<template>
  <div class="menu-bar" @click.stop>
    <!-- open和close消息只有trigger为click才会触发 -->
    <!-- @open="onOpen" -->
    <el-menu
      ref="menu"
      mode="horizontal"
      menu-trigger="hover"
      :background-color="menuConfig.background"
      :text-color="menuConfig.text"
      :active-text-color="menuConfig.active"
      :unique-opened="true"
      :collapse-transition="false"
      @select="onAction"
    >
      <template v-for="(action, actionIndex) in MainMenuActions">
        <menu-item v-if="action.children === undefined" :key="actionIndex" :action="action" />
        <menu-sub
          v-else
          :key="actionIndex"
          :actions="action"
          :popper-class="menuConfig.popperClass"
        />
      </template>
    </el-menu>
  </div>
</template>

<script>
import MenuItem from '../components/menu/item'
import MenuSub from '../components/menu/sub'
import MainMenuActions from '../actions/menu'
import ActionDispatcher from '../actions/dispatcher'
// import { throttle as _throttle } from 'lodash'
// import focus from '@/mixins/focus'

// 参考: 对于ElementUI 水平导航菜单click点击body不消失的问题
// https://blog.csdn.net/weixin_34292287/article/details/93173565
// 说明: 参考上述资料,实现了点击其它区域收起菜单的功能
//       但是, 由于ocx的存在, 点击下一个菜单,会显示一个空白,等当前菜单收起后,才会恢复,中间有卡顿!!!
// 原因: 未知

export default {
  components: {
    MenuItem,
    MenuSub
  },
  mixins: [ActionDispatcher],
  props: {
    menuConfig: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      MainMenuActions
      // 使用throttle包装,保证click事件只触发一次
      // onClickWithThrottle: _throttle(this.onDocumentClick, 100),
      // 每次点击的submenu的index
      // subMenuIndex: null
    }
  }
  // mounted() {
  //   setTimeout(() => {
  //     document.addEventListener('click', this.onClickWithThrottle)
  //   }, 0)
  // },
  // beforeDestroy() {
  //   window.removeEventListener('click', this.onClickWithThrottle)
  // },
  // methods: {
  //   onOpen(index, indexPath) {
  //     this.subMenuIndex = index
  //   },
  //   closeMenu() {
  //     const that = this
  //     this.$nextTick(() => {
  //       // 关闭submenu
  //       if (that.subMenuIndex) {
  //         that.$refs.menu.close(that.subMenuIndex)
  //       }
  //     })
  //   },
  //   onDocumentClick(event) {
  //     // console.log('用户在组件外部点击, 取消编辑状态', event)
  //     // 关闭submenu
  //     this.closeMenu()
  //   },
  //   // 重载vng/mixins/focus.js
  //   onGetFocus() {
  //     // 关闭submenu
  //     this.closeMenu()
  //   }
  // }
}
</script>

<style lang="scss">
.menu-bar {
  @import '../style/menu.scss';
}

// .menu-bar >>> .collapse-transition {
//   transition: 0s height, 0s padding-top, 0s padding-bottom !important;
// }

// .menu-bar >>> .horizontal-collapse-transition {
//   transition: 0s width, 0s padding-left, 0s padding-right !important;
// }

// .menu-bar
//   >>> .horizontal-collapse-transition
//   .el-submenu__title
//   .el-submenu__icon-arrow {
//   transition: 0s !important;
//   opacity: 0 !important;
// }
</style>
